/**
 * waterfall 瀑布流组件
 *
 * Author: Alpha Tan
 * Version: 1.0
 * @type {Number}
 */
(function($){
	$.fn.waterfall = function(options){
		var defaults = {
			renderTo: '#waterfall',
			boxWidth: 236,
			boxHeight: 280,
			template: '<div class="box">'+
			  '<div class="pic">'+
			    '<a href="/cms/product_detail.html" target="_blank" data-module="{{item.module}}" data-id="{{item.id}}"><img class="lazy" src="images/blank.gif" data-original="{{item.avatar.fileId}}" width="{{item.avatar.width}}" height="{{item.avatar.height}}" border="0" /></a>'+
			    '<p class="stats">'+
			      '<span class="fa fa-heart" title="喜欢"><i></i>{{item.like_count}}</span>'+
			      '<span class="fa fa-star" title="关注"><i></i>{{item.follow_count}}</span>'+
			    '</p>' +
			    '<div class="text">{{item.title}}</div>' +
			    '<div class="hovermenu"><span class="like btn-outline" title="喜欢"><i class="fa fa-heart"></i>喜欢</span><span class="follow btn-outline" title="关注"><i class="fa fa-star"></i>关注</span></div>' +
			  '</div>'+
			'</div>',
			moreDiv:'#moreDiv'
		};
		var opts = $.extend(defaults, options);

		function scollLoadedImages(){
			var lastBox = $(opts.renderTo + ">.box").last();
			var boxH = lastBox.offset().top - lastBox.outerHeight();
			var offsetTop = $(window).scrollTop();
			var height = $(window).height();
			return boxH < offsetTop + height;
		}

		function applyPosition(){
			var boxes = $(opts.renderTo + ">.box");
			var boxW = boxes.eq(0).outerWidth();
			var cols = Math.floor($(opts.renderTo).width()/boxW);
			$(opts.renderTo).css({
				"width": boxW*cols,
				"margin":"0 auto"
			});

			var hArr = [];
			boxes.each(function(i, item){
				var boxH = $(item).outerHeight();
				if(i<cols){			
					hArr.push(boxH);
				}else{
					var min = Math.min.apply(null, hArr);	
					var minIndex = $.inArray(min, hArr);

					$(item).css({
						position : 'absolute',
						top : min+'px',
						left : boxW * minIndex + 'px'
					});
					hArr[minIndex] += boxH;
				}
			});			

			var top = Math.max.apply(null, hArr) + 50;
			top = $(window).height()>top ? $(window).height() : top;
	  	$(opts.moreDiv).css({
	  		position:'absolute',
	  		width: '100%',
	  		top:top+'px',
	  		left:'0px'
	  	});
		}

		this.loadData = function(list){
			var htmlNodes = [];
	  	$(opts.moreDiv).hide();
	  	$.each(list, function(index, item){
	  		var html = 
		  		opts.template
		  		.replace('{{item.like_count}}',item.like_count)
		  		.replace('{{item.follow_count}}', item.follow_count)
		  		.replace('{{item.title}}', item.title)
		  		.replace('{{item.module}}', item.module)
		  		.replace('{{item.id}}', item.id);

	  		if(item.avatar.fileId){
	  			html = html.replace('{{item.avatar.fileId}}', '/ps/download/'+item.avatar.fileId+'?w='+opts.boxWidth);
	  		}else{
  				html = html.replace('{{item.avatar.fileId}}', 'images/no-image.jpg');
	  		}
  			html = html.replace('{{item.avatar.width}}', item.avatar.width || opts.boxWidth);
  			html = html.replace('{{item.avatar.height}}', item.avatar.height || opts.boxHeight);
	  		htmlNodes.push(html);
	  	});

			$(opts.renderTo).append(htmlNodes.join(''));
	  	applyPosition();

	  	$(".box").hover(function(){
	  		$(this).find(".hovermenu").toggle();
	  	});

	  	$(".like").bind('click touchstart', function(e){
			e.preventDefault();
	  		var parentNode = $(this).parent().parent();
	  		var eleA = parentNode.find("a");
	  		var id = eleA.data('id'), module = eleA.data('module');
	  		$.ajax({
	  			url:'/cms/waterfall/like',
	  			type:'PUT',
					contentType:'application/json',
	  			cache:false,
	  			data: JSON.stringify({"id":id, "module":module}),
	  			success:function(res){
	  				var response = res && JSON.parse(res);
	  				if(response.result===1){
	  					var heartNode = parentNode.find(".stats>span.fa-heart");
	  					heartNode.html('<i></i>'+(parseInt(heartNode.text())+1));
	  				}
	  			}
	  		});
	  	});

	  	$(".follow").bind('click touchstart', function(e){
			e.preventDefault();
	  		var parentNode = $(this).parent().parent();
	  		var eleA = parentNode.find("a");
	  		var id = eleA.data('id'), module = eleA.data('module');
	  		$.ajax({
	  			url:'/cms/waterfall/follow',
	  			type:'PUT',
					contentType:'application/json',
	  			cache:false,
	  			data: JSON.stringify({"id":id, "module":module}),
	  			success:function(res){
	  				var response = res && JSON.parse(res);
	  				if(response.result===1){
	  					var starNode = parentNode.find(".stats>span.fa-star");
	  					starNode.html('<i></i>'+(parseInt(starNode.text())+1));
	  				}
	  			}
	  		});
	  	});
			
			$("img.lazy").lazyload({ 
				threshold : 200
				//,effect : "fadeIn"
			});
	  	$(opts.moreDiv).show();
		};

		return this;
	};

})(jQuery);